<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>bookshelf</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
	<div id="dk-bookshelf" data-url="">
		<div id="dk-navi">
			<a href="">Manage Books</a>
		</div>

		<!-- unread -->
		<div class="dk-category" data-status="unread">
			<h4 class="dk-title">New Books<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
					</div>
				</div>
			</div>
		</div>

		<!-- reading now -->
		<div class="dk-category" data-status="reading">
			<h4 class="dk-title">Reading now<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- i recommend -->
		<div class="dk-category" data-status="rcd">
			<h4 class="dk-title">I recommend<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- wouldn't recommend -->
		<div class="dk-category" data-status="nrecd">
			<h4 class="dk-title">I wouldn't recommend<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- beach reads -->
		<div class="dk-category" data-status="beachr">
			<h4 class="dk-title">My beach reads<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- rainy day reads -->
		<div class="dk-category" data-status="rainyr">
			<h4 class="dk-title">My rainy day reads<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- feel good reads -->
		<div class="dk-category" data-status="goodr">
			<h4 class="dk-title">My feel-good reads<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- commute reads -->
		<div class="dk-category" data-status="comr">
			<h4 class="dk-title">My commute reads<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>

		<!-- past reads -->
		<div class="dk-category" data-status="pastr">
			<h4 class="dk-title">Past reads<span class="dk-switch">▼</span></h4>
			<div class="dk-container-out dk-hide">
				<div class="dk-container-in">
					<div class="dk-book" data-id="5">
						<img src="images/cover.jpg" alt="">
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>